<template>
  <div class="container">
    <nav-bar title="课程报名" />
    <div class="list">
      <div class="item">
        <div class="main">
          <div class="name">{{product.ProductName}}</div>
          <div class="worth">价值{{product.MarketPrice}}元</div>
        </div>
        <div class="infor">
          <div class="cost">{{productSkuPrice}}元</div>
          <!-- <div class="num-area">
            <div class="reduce" @click="reduce"></div>
            <div class="num">{{num}}</div>
            <div class="plus" @click="plus"></div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="btn-cart">
      <div class="btn-in" @click="apply">立即报名</div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getProductSkuId, getProduct } from '../../network/product'
import { postSubmitOrder } from '../../network/orderConfirm'
import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      num: 1,
      product: {},
      shop: {},
      virtualProductInfo: {},
      productSkuId: null,
      productSkuPrice: null,
      productSkuStock: null,
      productSkuInfo: [],
      matchSku: [],
      MaxSaleCount: 1,
    }
  },
  mounted() {
    this.getProductDetail()
    this.getProductSkuId()
  },
  methods: {
    getProductDetail(){
      let id = this.$route.query.id
      getProduct(id, product => {
        this.product = product.Product
        this.MaxSaleCount = product.MaxSaleCount
        this.shop = product.Shop
        this.virtualProductInfo = product.VirtualProductInfo
      })
    },
    getProductSkuId(){
      let productId = this.$route.query.id
      let requestData = {
        productId,
        colloPid: 0
      }
      getProductSkuId(requestData, skuInfo => {
        this.productSkuInfo = skuInfo
        this.matchSku = skuInfo
        this.productSkuId = skuInfo[0].SkuId
        this.productSkuPrice = skuInfo[0].Price.toFixed(2)
        this.productSkuStock = skuInfo[0].Stock
      })
    },
    apply(){
      if(this.num < 1){
        Toast('请填写数量')
        return false
      }
      let requestData = {
        userkey: localStorage.getItem('userKey'),
        skuIds: this.productSkuId,
        counts: this.num,
        recieveAddressId: 0, // 虚拟商品地址传0
        couponIds: '',
        integral: '',
        orderRemarks: '',
        isCashOnDelivery: ' ',
        invoiceType: ' ',
        invoiceTitle: ' ',
        invoiceContext: ' ',
        invoiceCode: ' ',
      }
      // 商品详细信息
      requestData.jsonOrderShops = [
        { 
          ShopId: this.shop.Id + '', 
          OrderSkus: [{ SkuId: requestData.skuIds, Count: requestData.counts }], 
          DeliveryType: "Express", 
          ShopBrandId: 0, 
          PostOrderInvoice: { 
            InvoiceType: "None", 
            InvoiceTitle: null, 
            InvoiceCode: null, 
            InvoiceContext: null, 
            RegisterAddress: null, 
            RegisterPhone: null, 
            BankName: null, 
            BankNo: null, 
            RealName: null, 
            CellPhone: null, 
            Email: null, 
            RegionID: 0, 
            Address: null 
          } 
        } 
      ]
      requestData.CapitalAmount = ' ',
      requestData.PayPwd = ' '
      requestData.VirtualProductItems = [{
        OrderId: 0, 
        OrderItemId: 0, 
        Content: null, 
        VirtualProductItemName: this.product.ProductName, 
        VirtualProductItemType: 1
      }]
      requestData.ProductType = 1 // 虚拟商品传1 否则传0

      console.log(requestData)

      postSubmitOrder(requestData, (orderId) => {
        console.log('提交成功, 订单ID ' + orderId)
        this.$router.push({
          path: '/pay',
          query: {
            orderId,
            payAmout: this.payPrice,
            ordertype: 'v'
          }
        })
      })
      
      /*
        公共提交成功页面调用方法
       */
      // this.$router.push({
      //   path: '/success',
      //   query: {
      //     navigate: '/userClass',
      //     msg: '报名',
      //   }
      // })
    },
    reduce(){
      if(this.num>0){
        this.num--
      }
    },
    plus(){
      if(this.num >= this.MaxSaleCount){
        Toast('已达到最大购买数')
        return false
      }
      this.num++
    }
  },
}
</script>

<style scoped>
.list{
  margin-top: 10px;
}
.list .item{
  margin: 0 10px;
  margin-bottom: 10px;
  padding: 20px 0 0 0;
  background-color: #ffffff;
}
.list .item .main{
  padding: 0 15px;
}
.list .item .main .name{
  font-size: 16px;
}
.list .item .main .worth{
  font-size: 12px;
  padding-top: 6px;
  color: #999999;
}
.list .item .infor{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
  padding: 12px 15px;
  margin-top: 15px;
  border-top: 1px solid #f6f6f6;
}
.list .item .infor:before,
.list .item .infor:after{
  position: absolute;
  top: -7px;
  display: block;
  content: '';
  width: 6px;
  height: 12px;
  background-color: #f2f2f2;
}
.list .item .infor:before{
  left: 0;
  border-radius: 0 6px 6px 0;
}
.list .item .infor:after{
  right: 0;
  border-radius: 6px 0 0 6px;
}
.list .item .infor .cost{
  color: #d50721;
}
.list .item .infor .num-area{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list .item .infor .num-area .reduce,
.list .item .infor .num-area .plus{
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
}
.list .item .infor .num-area .num{
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.list .item .infor .num-area .reduce:before,
.list .item .infor .num-area .plus:before{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4px;
  content: '';
  display: block;
  width: 9px;
  height: 1px;
  background-color: #999999;
}
.list .item .infor .num-area .plus:after{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  content: '';
  display: block;
  width: 1px;
  height: 10px;
  background-color: #999999;
}
.btn-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff, #ffffff);
}
.btn-cart .btn-in{
  display: block;
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
</style>